<html lang="cn">

<head>
  <meta charset="UTF-8">
  <script src="../rem.js"></script>
  <meta name="format-detection" content="telephone = no">
  <meta name="viewport"
    content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <link rel="stylesheet" href="../common.css">
  <link rel="stylesheet" href="./brandVision.css">
  <script>
    function rembig() {
      setRemSize()
      window.addEventListener("resize", setRemSize, false)

      function setRemSize() {
        var width = document.documentElement.clientWidth
        if (width > 750) {
          width = 750
        }
        var _clientWidth = width / 7.5 + 'px'
        document.documentElement.style.fontSize = _clientWidth
      }
    }
    rembig()
  </script>
</head>

<body>
  <div class="container">
    <div class="header">
      <div class="group">
        <a class="topBackUnique">
          <img class="topBackUnique" src="../images/newIndex/ppsj_fhsy_btn_icon.png">
        </a>
        <form class="input" id="input" action="">
          <input type="search" class="searching" placeholder="请输入您搜索的名称" />
          <div class="searchImg">
            <img src="../images/detailsOfBrand/wks_ssh_icon.png" alt="" srcset="">
          </div>
        </form>
      </div>
    </div>
    <ul class="searchHistoryList">
      <!-- <li>
        <div>
          <img src="../images/detailsOfBrand/wks_ssh_icon.png" alt="" srcset="">
          <span>正太正太正太</span>
        </div>
        <img src="../images/detailsOfBrand/mjtzx_btn_icon.png" alt="" srcset="" >
      </li> -->
    </ul>
    <div class="content">
      <div class="banner">
        <img src="../images/list/ppsj_banner_img.png" alt="" srcset="">
        <a class="button"></a>
      </div>
      <div class="listGroup">
        <a class="item">
          <div class="left">
            <img src="../images/newIndex/home_banner_img.png" alt="" srcset="">
          </div>
          <div class="right">
            <div class="title needEllipsis">德秀丽</div>
            <div class="description ellipsis">
              <span>
                淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器; 空气净化装置和机器; 抽水马桶; 浴霸; 坐浴浴盆; 盥洗盆(卫生设备部件); 浴室装置;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器; 空气净化装置和机器装置和机器装置和机器抽水坐浴
              </span>
            </div>
          </div>
        </a>
        <a class="item">
          <div class="left">
            <img src="../images/newIndex/home_banner_img.png" alt="" srcset="">
          </div>
          <div class="right">
            <div class="title needEllipsis">3333333</div>
            <div class="description ellipsis">
              <span>
                  淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器; 空气净化装置和机器; 抽水马桶; 浴霸; 坐浴浴盆; 盥洗盆(卫生设备部件); 浴室装置;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器; 空气净化装置和机器装置和机器装置和机器抽水坐浴
              </span>
            </div>
          </div>
        </a>
        <a class="item">
          <div class="left">
            <img src="../images/newIndex/home_banner_img.png" alt="" srcset="">
          </div>
          <div class="right">
            <div class="title needEllipsis">22222222</div>
            <div class="description ellipsis">
              <span>
                  淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器; 空气净化装置和机器; 抽水马桶; 浴霸; 坐浴浴盆; 盥洗盆(卫生设备部件); 浴室装置;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器; 空气净化装置和机器装置和机器装置和机器抽水坐浴
              </span>
            </div>
          </div>
        </a>
        <a class="item">
          <div class="left">
            <img src="../images/newIndex/home_banner_img.png" alt="" srcset="">
          </div>
          <div class="right">
            <div class="title needEllipsis">zzzzzzzzzz</div>
            <div class="description ellipsis">
              <span>
                  淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器; 空气净化装置和机器; 抽水马桶; 浴霸; 坐浴浴盆; 盥洗盆(卫生设备部件); 浴室装置;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器; 空气净化装置和机器装置和机器装置和机器抽水坐浴
              </span>
            </div>
          </div>
        </a>
      </div>
      <div class="pageContainer">
        <div class="pageContent">
          <div class="prev button border1px">
            上一页
          </div>
          <div class="next button">
            下一页
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

<script>
  var bvInit = {
    searching: function () {
      // var sort = function (value) {
      //   var flag = true
      //   var surplusRanking = $('.listGroup').children()
      //   for (var i = 0; i < surplusRanking.length; i++) {
      //     + function (i) {
      //       var arr = []
      //       var ps = $(surplusRanking[i]).find('.title')
      //       var pss = $($(surplusRanking[i]).find('.title'))
      //       for (var j = 0; j < ps.length; j++) {
      //         + function (j) {
      //           arr.push(pss.text())
      //         }(j)
      //       }
      //       if (arr.toString().toLowerCase().indexOf(value.toLowerCase()) != '-1' && value.length) {
      //         if (flag) {
      //           $('html,body').animate({
      //             scrollTop: surplusRanking[i].offsetTop - 120
      //           }, 100)
      //           flag = null
      //         }
      //       }
      //     }(i)
      //   }
      // }
      // var searchTimer
      // $('.searching').on('input', function (e) {
      //   if (searchTimer) clearTimeout(searchTimer)
      //   searchTimer = setTimeout(function () {
      //     sort(e.delegateTarget.value)
      //   }, 133)
      // })
    },
    scroll: function () {
      if ($(window).scrollTop() > 0) $('.header').css('background', 'rgba(168,1,8,1)')
      $(window).scroll(function () {
        if ($(this).scrollTop() > 0) {
          $('.header').css('background', 'rgba(168,1,8,1)')
        } else {
          if ($('.searchHistoryList')[0].style.display == 'flex') return $('.header').css('background', 'rgba(168,1,8,1)')
          $('.header').css('background', 'white')
        }
      })
    },
    searchInit: function () {
      var init = {
        runOnce: function () {
          $('#input').submit(function (e) {
            e.preventDefault()
            e.stopPropagation()
          })
          var timer
          $('.searching').keypress(function (e) {
            if (e.which == 13) {
              clearTimeout(timer)
              timer = setTimeout(function () {
                init.setSearchHistory()
                bvInit.searchGo($('.searching').val())
              }, 233)
            }
          })
          $('.searchImg').click(function (e) {
            e.stopPropagation()
            clearTimeout(timer)
            timer = setTimeout(function () {
              init.setSearchHistory()
              bvInit.searchGo($('.searching').val())
            }, 233)
          })
          $('.searching').focus(function (e) {
            $('.header').css('background', 'rgba(168,1,8,1)')
            $('.searchHistoryList').css('display', 'flex')
            init.searchListShow()
          })
          var none = function () {
            if (($(window).scrollTop() > 0)) $('.header').css('background', 'rgba(168,1,8,1)')
            else $('.header').css('background', 'white')
            $('.searchHistoryList').css('display', 'none')
          }
          $('.content').click(function () {
            none()
          })
        },
        getSearchHistory: function () {
          if (localStorage.getItem('searchHistory')) return JSON.parse(localStorage.getItem('searchHistory'))
          return []
        },
        setSearchHistory: function () {
          if (!$('.searching').val()) return
          var arr = init.getSearchHistory() || []
          arr.unshift($('.searching').val())
          localStorage.setItem('searchHistory', JSON.stringify(arr))
          init.searchListShow()
        },
        searchListShow: function () {
          var getLi = function (value) {
            return "<li>"+
            "        <div class='textGroup'>"+
            "          <img src=\"../images/detailsOfBrand/wks_ssh_icon.png\" alt=\"\" srcset=\"\">"+
            "          <div class='needEllipsis text'>" + value + "</div>"+
            "        </div>"+
            "        <img src=\"../images/detailsOfBrand/mjtzx_btn_icon.png\" alt=\"\" srcset=\"\" >"+
            "      </li>"
          }
          var html = ''
          var lists = init.getSearchHistory()
          for (var i = 0; i < lists.length; i++) {
            (function (i) {
              html += getLi(lists[i])
            })(i)
          }
          $('.searchHistoryList').html(html)
          init.setSearchHistoryLiEvent()
        },
        searchHistoryShowAndHide : function () {
          // var none = function () {
          //   if (($(window).scrollTop() > 0)) $('.header').css('background', 'rgba(168,1,8,1)')
          //   else $('.header').css('background', 'white')
          //   $('.searchHistoryList').css('display', 'none')
          // }
          // $('.searching').blur(function () {
          //   if (($(window).scrollTop() <= 0) && $('.searchHistoryList')[0].style.display == 'none') $('.header').css('background', 'white')
          // })
          // $('body').click(function (e) {
          //   none()
          // })
          // $('.header').click(function (e) {
          //   none()
          // })
          // $('.content').click(function () {
          //   none()
          // })
          // $('.searching').click(function (e) {
          //   e.stopPropagation()
          // })
          // $('.searchHistoryList').click(function (e) {
          //   e.stopPropagation()
          // })
        },
        setSearchHistoryLiEvent: function () {
          $('.searchHistoryList li').on('click', function () {
            var text = $(this).text().trim()
            bvInit.searchGo(text)
          })
        }
      }
      init.runOnce()
    },
    searchGo: function (text) {
      if (!text) return
      console.log(text, '愣着干什么 跳转啊？')
    }
  }
  $(document).ready(function () {
    ellipsis()
    for (var i in bvInit) {
      bvInit[i]()
    }
  })
</script>